<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel" :oktext="$ti18('rxForm.saveBtn', '保存')">
        <div  class="CustomPageTemplateEdit-head">
            <a-form-model ref="form" :model="mdl" :rules="rules" >
                <div class="CustomPageTemplateEdit-head-modle">
                    <a-form-model-item :label="i18n('form.moduleName','模块名称')" prop="name">
                        <a-input :placeholder="i18n('form.moduleName','模块名称','input')" v-model="mdl.name"/>
                    </a-form-model-item>
                    <a-form-model-item :label="i18n('form.moduleAlias','模块别名')" prop="alias" class="x-a-form-model-error">
                        <a-input :placeholder="i18n('form.moduleAlias','模块别名','input')" v-model="mdl.alias"/>
                    </a-form-model-item>
                    <a-form-model-item :label="i18n('form.uploadPreviewImage','上传预览图')"  prop="previewImage" >
                       <div class="userHeadPortrait-upload">
                           <a-upload
                               name="files"
                               action="/api/api-system/system/core/sysFile/upload"
                               :headers="headers"
                               :beforeUpload="beforeUpload"
                               @change="handleChange"
                           >
                               <a-button> <a-icon type="cloud-upload" />
                               {{i18n('form.clickToUploadImages','点击上传图片')}}
                               </a-button>
                           </a-upload>
                           <div v-if="imageUrl" class="userHeadPortrait-upload-url">
                               <img :src="imageUrl" alt="photo" class="userHeadPortrait" style="object-fit: cover" />
                               <span>{{imageName}}</span>
                               <my-icon @click="deleteImg" class="userHeadPortrait-upload-delete" type="iconicon-test28"></my-icon>
                           </div>
                       </div>
                    </a-form-model-item>
                </div>
            </a-form-model>
        </div>
        <div class="CustomPageTemplateEdit-common">
            <div class="CustomPageTemplateEdit-common-left">
                <custom-page-design  ref="pageDesign" changePageName="CustomPageTemplateEdit" :changePage="changePage" @setType="setType" @runChange="onChange"></custom-page-design>
            </div>
            <div class="CustomPageTemplateEdit-common-right">
                <custom-page-show ref="customPageShow" :type="type"></custom-page-show>
            </div>
        </div>
    </rx-dialog>
</template>
<script>
import CustomPageTemplateApi from '@/api/portal/core/customPageTemplate'
import {RxDialog, BaseFormModel,Util,TokenUtil} from "@lowcode/jpaas-common-lib";
import CustomPageDesign from "./customPage/CustomPageDesign"
import userState from "@/assets/js/userState";
import CustomPageShow from "./CustomPageShow"

export default {
    name: 'CustomPageTemplateEdit',
    mixins: [BaseFormModel,userState],
    components: {
        RxDialog,
        CustomPageDesign,
        CustomPageShow
    },
    data() {
        return {
            /**
             * 子表列表，以及表格属性
             */
            subTable: {},
            rules: {
                createByName: [{required: false, message: this.i18n('form.creatorName','创建人名称','input'), trigger: 'change'}],
                cssStyle: [{required: false, message: this.i18n('form.CSSStyles','CSS样式','input'), trigger: 'change'}],
                javascript: [{required: false, message: this.$ti18('rxDecorator.input','请输入JS') + 'JS', trigger: 'change'}],
                name: [{required: true, message: this.i18n('form.moduleName','模块名称','input'), trigger: 'change'}],
                alias: [
                    {required: true, message: this.i18n('form.moduleAlias','模块别名','input'), trigger: 'change'},
                    {pattern:/^[a-zA-Z][a-zA-Z0-9_-]*$/,message:this.i18n2('form.str','不能以数字开头,不能包含【_-】以外的特殊字符！','input')}
                ],
                previewImage: [{required: false, message: this.i18n('form.previewImage','预览图','input'), trigger: 'change'}],
                template: [{required: false, message: this.$ti18('rxDecorator.input','请输入HTML') + 'HTML', trigger: 'change'}]
            },
            headers:{},
            imageUrl:"",
            imageName:'',
            loading:false,
            //mobile pc
            type:"pc"
        }

    },
    created() {
        var token =TokenUtil.getToken();
        if (token) {
            this.headers['Authorization'] = 'Bearer ' + token // 让每个请求携带token--['Authorization']为自定义key 请根据实际情况自行修改
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "customPageTemplate", key);
        },
        i18n2(name,text,key){
            return this.$ti18(name,text,"formBoEntity",key);
        },
        onload_(values){
            //数据初始化
            if(values){
                if(values.previewImage){
                    this.imageName = JSON.parse(values.previewImage).imageName;
                    this.imageUrl = JSON.parse(values.previewImage).imageUrl
                }
                this.$refs.pageDesign.setData({
                    template:values.template,
                    mobileTemplate:values.mobileTemplate,
                    jsScript:values.javascript,
                    cssStyle:values.cssStyle,
                })
            }
            this.onChange();
        },
        get(id) {
            return CustomPageTemplateApi.get(id);
        },
        save() {
            var obj = this.$refs.pageDesign.getData();
            this.$set(this.mdl,"template",obj.template);
            this.$set(this.mdl,"mobileTemplate",obj.mobileTemplate);
            this.$set(this.mdl,"javascript",obj.jsScript);
            this.$set(this.mdl,"cssStyle",obj.cssStyle);
            //是否为默认
            this.$set(this.mdl,"isDefault","1");
            if(!this.mdl.createByName){
                this.$set(this.mdl,"createByName",this.user.fullName);
            }
            return CustomPageTemplateApi.save(this.mdl);
        },
        handleChange(info) {
            if (info.file.status === 'uploading') {
                this.loading = true;
                return;
            }
            if (info.file.status === 'done') {
                var res=info.fileList[info.fileList.length-1].response;
                if(res.success){
                    this.imageName = res.data[0].fileName;
                    this.imageUrl=this.getFilePath(res.data[0].fileId);
                    var previewImage  = {
                        imageName:this.imageName,
                        imageUrl:this.imageUrl
                    }
                    this.$set(this.mdl,"previewImage",JSON.stringify(previewImage));
                    this.loading=false;
                }
            }
        },
        beforeUpload(file) {
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
            if (!isJpgOrPng) {
                this.$message.error(this.i18n('onlyImage','只能上传图片!'));
            }
            return isJpgOrPng ;
        },
        getFilePath(fileId){
            let token = TokenUtil.getToken();
            fileId=Util.encryptWord(fileId);
            return "/api/api-system/system/core/sysFile/previewFile?fileId=" + fileId + "&accessToken=" + token;
        },
        //实时渲染
        changePage(viewConfig){
            if(viewConfig){
                this.$refs.customPageShow.loadView(viewConfig);
            }
        },
        deleteImg(){
            this.$set(this.mdl,"previewImage",'');
            this.imageName = '';
            this.imageUrl='';
        },
        onChange(){
            this.$refs.pageDesign.onChange();
        },
        setType(type){
            this.type=type;
        }
    }
}
</script>
<style scoped>
.CustomPageTemplateEdit-common-left{
    position: relative;
}
.CustomPageTemplateEdit-common-left-button{
    position: absolute;
    right: 5px;
    top: 5px;
    text-align: right;
    z-index: 99;
}
.userHeadPortrait-upload-url{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.userHeadPortrait-upload-url:hover .userHeadPortrait-upload-delete{
    display: block;
}
.userHeadPortrait-upload-delete{
    color: red;
    font-size: 18px;
    cursor: pointer;
    margin-left: 5px;
    display: none;
}
.userHeadPortrait-upload{
    display: flex;
}
.userHeadPortrait-upload >>>.ant-upload-list{
    display: none;
}
.userHeadPortrait{
    height: 26px;
    margin: 0px 10px 0px 16px;
    border-radius: 5px;
}
.CustomPageTemplateEdit-head{

}
.CustomPageTemplateEdit-head-modle{
    display: flex;
}
.CustomPageTemplateEdit-common{
    height:calc(100% - 50px);
    width: 100%;
    display: flex;
}
.CustomPageTemplateEdit-head-modle >>> .ant-form-item{
    margin-right: 30px!important;
}
.CustomPageTemplateEdit-common>div:nth-child(1){
    flex: 1;
    border: 1px solid #dadde0;
    border-radius: 5px;
    margin-right: 10px;
    overflow: hidden;
}
.CustomPageTemplateEdit-common-right{
    flex: 1;
    flex-direction: column;
    border: 1px solid #dadde0;
    overflow: auto;
}
</style>
